import React, { Component } from "react";

// 受控组件和非受控组件，它们都是针对于表单控件来说的
// 最终的目的都是要来获取到表单元素里面的内容

// 受控组件就是由我们自己来控制的组件
// 需要加上value属性,onChange事件

// 受控组件可以做到更精确的控制, 内存开销相对更小
// 官方推荐使用受控组件
// 只有文件上传框，才一定要用非受控组件(文件上传框的内容是只读的)

class App extends Component {
  state = {
    value: "abc",
  };
  handleChange(e) {
    // console.log(e.target.value);
    this.setState({
      value: e.target.value,
    });
  }
  handleClick() {
    console.log(this.state.value);
  }
  render() {
    return (
      <>
        <h2>受控组件</h2>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
        />
        {/* <input type="file" /> */}
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
